<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.vin"
        placeholder="请输入VIN号"
        style="width: 200px;"
        class="filter-item"
      />
      <el-input
        v-model="listQuery.imgCode"
        placeholder="请输入验证码"
        style="width: 200px;"
        class="filter-item"
      />
      <vue-img-verify @getImgCode="getImgCode" ref="vueImgVerify" :height="36" class="filter-item"/>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <el-button class="filter-item" type="info" icon="el-icon-refresh" @click="handleReset">重置</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="vin号" prop="vin" />
      <el-table-column align="center" label="文件名" prop="fileName" />
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-if="row.status!='deleted'" size="mini" type="success" @click="handleDownload(row)">
            下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 通过a标签下载 -->
    <a id="download" href="" target="_blank" style="display:none"></a>
  </div>
</template>
<style lang="scss" scoped>
// 样式微调
  .img-verify {
    margin-top: 4px;
  }
</style>
<script>
import { fetchList } from '@/api/mes-web/pdf-file-query'
import vueImgVerify from '@/components/ImgVerify'
import underscore from 'underscore'

export default {
  name: 'PDFFileQuery',
  components: { vueImgVerify },
  data() {
    return {
      // 查询
      listQuery: {
        vin: undefined,
        imgCode: ''
      },
      verifyImg: '',
      // 表格
      list: null,
      listLoading: false
    }
  },
  created() {

  },
  mounted() {
    this.verifyImg = this.$refs.vueImgVerify.draw()
  },
  methods: {
    fetchData() {
      // 提交验证
      if (!this.listQuery.vin || !this.listQuery.imgCode) {
        this.$message.warning('请输入VIN号和验证码')
        return
      }
      if (this.listQuery.imgCode.toLocaleLowerCase() !== this.verifyImg.toLocaleLowerCase()) {
        this.$message.warning('验证码不正确')
        return
      }
      this.listLoading = true
      const data = underscore.omit(this.listQuery, 'imgCode')
      fetchList(data).then(res => {
        if (res.code === 200) {
          this.list = [
            { vin: this.listQuery.vin, url: res.data, fileName: res.data.split('\\')[res.data.split('\\').length - 1] }
          ]
        } else {
          this.list = [
            { vin: 'vin号' + this.listQuery.vin + '不存在', url: '', fileName: '' }
          ]
        }
        this.listLoading = false
      })
    },
    handleFilter() {
      this.fetchData()
    },
    handleReset() {
      this.listQuery = {
        vin: undefined
      }
      this.verifyImg = this.$refs.vueImgVerify.draw()
    },
    handleDownload(row) {
      const element = document.getElementById('download')
      element.setAttribute('href', '/FTP/' + row.url)
      element.setAttribute('download', row.fileName)
      element.click()
    },
    getImgCode(code) {
      this.verifyImg = code
    }
  }
}
</script>
